<template>
    <view class="add-fill" v-show="show" :style="{bottom: bottom || '44px'}">
        <view class="box">
			<view class="icons">
				<view class="icons-flex" style="">
					<image class="icon" @click="showEmoji=!showEmoji" src="/static/chat/bq.png" mode="aspectFill"></image>

                    <upload-btn
                        :icon-info="{width: '44rpx', icon: '/static/chat/tp.png'}"
                        type="image"
                        @chooseFile="chooseFile"
                    ></upload-btn>
                    <upload-btn
                        v-if="fileFormats"
                        :icon-info="{width: '44rpx', icon: '/static/chat/sp.png'}"
                        type="video"
                        @chooseFile="chooseFile"
                    ></upload-btn>
                    <upload-btn
                        v-else
                        :icon-info="{width: '44rpx', icon: '/static/chat/wj.png'}"
                        type="file"
                        @chooseFile="chooseFile"
                    ></upload-btn>
					
				</view>
				<view class="send" @click="close()">
					<image class="icon" src="/static/guanbi.png" mode="aspectFill"></image>
				</view>
			</view>
            <view class="emoji-list" v-if="showEmoji">
                <view class="em-icon" @click="clickEmoji(str)" v-for="(str, i) in utils.emojiList" :key="i"><text>{{str}}</text></view>
            </view>
		</view>
    </view>
</template>
<script>
import SparkMD5 from 'spark-md5'
import md5Str from '@/static/md5.min.js'
import uploadBtn from './select-upload-file.vue'
export default {
    components: {
        uploadBtn
    },
    data() {
        return{
            notConfirmImages: [],
            sendImages: [],
            confirmImages: [],

            // 上传接口参数
            uploadOption: {
                // 上传服务器地址，此地址需要替换为你的接口地址
                // url: 'http://hlapi.j56.com/dropbox/document/upload',
                url: 'https://xiaode-2f00.obs.cn-east-3.myhuaweicloud.com/',
                // 上传附件的key
                name: 'file',
                formData: {}
            },
            // 选择文件后是否立即自动上传，true=选择后立即上传
            instantly: false,
            // 必传宽高且宽高应与slot宽高保持一致
            width: '44rpx',
            height: '44rpx',
            // 限制允许上传的格式，空串=不限制，默认为空
            formats: '',
            // 文件上传大小限制
            size: 10,
            // 是否打印日志
            debug: true,
            uploladFileNumber: 0,

            showEmoji: false,
            sendMsgType: 1, // 1是图片，8是文件
            selectAllFlies: []

        }
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        bottom: {
            type: String,
            default: '49px'
        },
        fileFormats: {
            type: String,
            default: ''
        }
    },
    methods: {
        chooseFile(type, list, sendList){
            this.$emit('chooseFile', type, list, sendList)
			
		},
        clickEmoji(str){
            this.$emit('clickEmoji', str)
        },
        close(){
            this.showEmoji = false;
            this.$emit('close')
        }
    }
}
</script>
<style lang="less" scoped>
    .add-fill{
        position: fixed;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		/* #ifndef H5 */
		left: 0;
		right: 0;
		/* #endif */
		// bottom: 44px;
		background-color: #fff;
		border-top: 1rpx solid #EEEEEE;
		z-index: 9;
		.icons{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12rpx 0;
			border-bottom: 1rpx solid #EEEEEE;
		}
		.icon{
			width: 44rpx;
			height: 44rpx;
		}
		.send{
			image{
				margin-right: 0;
			}
		}
	}
    .icons-flex{
        width: 30%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .box{
			
        padding: 0 32rpx 0;

    }
    // 表情列表
	.emoji-list{
        padding: 20rpx 0;
		max-height: 440rpx;
		overflow-y: scroll;
		// padding: 0 36rpx;
		.em-icon{
			display: inline-block;
			width: 70rpx;
			text-align: center;
			margin-right: 14rpx;
			margin-bottom: 14rpx;
		}
		text{
			font-size: 52rpx;
			
			&:nth-child(8n){
				margin-right: 0;
			}
		}
	}
</style>